<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich" >
      
      <f:view contentType="text/html">
      
		<h:head>
			<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
			<title>Cadastro Dm Club</title>
			<link href="style/dm-style.css" rel="stylesheet" type="text/css" />
			
			<style type="text/css">
				a:link {
					color: #FFF;
					text-decoration: none;
				}
				
				a:visited {
					text-decoration: none;
					color: #FFF;
				}
				
				a:hover {
					text-decoration: underline;
					color: #0FF;
				}
				
				a:active {
					text-decoration: none;
					color: #FFF;
				}
			</style>
			
			<h:panelGroup id="mensagens">
					<h:outputScript rendered="#{not empty facesContext.messageList}">
						<a4j:repeat value="#{facesContext.messageList}" var="message">
							alert("<h:outputText value="#{message.summary}" />");
						</a4j:repeat>
					</h:outputScript>
			</h:panelGroup>
		    
		    <a4j:status onstart="#{rich:component('statPane')}.show()" onstop="#{rich:component('statPane')}.hide()" /> 
				<rich:popupPanel id="statPane" autosized="true"> 
					<h:outputText value="Aguarde..." styleClass="output-style"/> 
				</rich:popupPanel>
			
		</h:head>

	<body>
	 <div class="conteiner">
		<div class="topo">
			<div class="logo">
				<div class="logo_inside">
					<img src="images/dm_logo.jpg" width="151" height="59" />
				</div>
				<div class="logo_lupa">
					<img src="images/lupa.jpg" width="24" height="24" />
				</div>
				<div class="logo_search" align="right">
					<label> <input type="text" name="textfield" id="textfield" /></label>
				</div>
			</div>
			<div class="menu">
				<div class="menu_inside_1" align="center">
					<a href="#">Capa</a>
				</div>
				<div class="menu_inside_2" align="center">
					<a href="#">Cidades</a>
				</div>
				<div class="menu_inside_3" align="center">
					<a href="#">Política e Justiça</a>
				</div>
				<div class="menu_inside_2" align="center">
					<a href="#">Esportes</a>
				</div>
				<div class="menu_inside_1" align="center">
					<a href="#">Brasil</a>
				</div>
				<div class="menu_inside_4" align="center">
					<a href="#">Mundo</a>
				</div>
				<div class="menu_inside_5" align="center">
					<a href="#">Economia</a>
				</div>
				<div class="menu_inside_6" align="center">
					<a href="#">Variedades</a>
				</div>
				<div class="menu_inside_7" align="center">
					<a href="#">Entretenimento</a>
				</div>
			</div>
		</div>
		<div class="meio4">
			<img src="images/dm_cartao_big.jpg" width="224" height="236" />
		</div>
		<div class="meio5">
			<strong><img src="images/11px.gif" width="11" height="11" />Primeiro
				Acesso</strong>
		</div>
		<div class="meio6">
			<div class="form1" align="right">Email:</div>
			<div class="form2">
				<label for="textfield2"></label> <input type="text"
					name="textfield2" id="textfield" style="width: 240px" />
			</div>
			<div class="form3" align="right">Nome:</div>
			<div class="form4">
				<label for="textfield3"></label> <input type="text"
					name="textfield3" id="textfield" style="width: 240px" />
			</div>
			<div class="form3" align="right">Nome no cartão:</div>
			<div class="form4">
				<label for="textfield4"></label> <input type="text"
					name="textfield4" id="textfield" style="width: 240px" />
			</div>
			<div class="form3" align="right">Sexo:</div>
			<div class="form4">
				<label for="select"></label> <select name="select" id="select"
					style="width: 244px">
				</select>
			</div>
			<div class="form3" align="right">Celular:</div>
			<div class="form5">
				<label for="textfield3"></label> <input type="text"
					name="textfield5" id="textfield2" style="width: 25px" />
			</div>
			<div class="form6">
				<label for="textfield3"></label> <input type="text"
					name="textfield6" id="textfield3" style="width: 60px" />
			</div>
			<div class="form7" align="right">Operadora</div>
			<div class="form8">
				<label for="select2"></label> <select name="select2" id="select2"
					style="width: 84px">
					<option>VIVO</option>
					<option>Claro</option>
					<option>Oi</option>
					<option>TIM</option>
				</select>
			</div>
			<div class="form3" align="right">Estado civil:</div>
			<div class="form4">
				<label for="select"></label> <select name="select3" id="select"
					style="width: 244px">
				</select>
			</div>
			<div class="form3" align="right">Nascido em:</div>
			<div class="form6">
				<label for="textfield3"></label> Dia: <select name="select4"
					id="select3" style="width: 35px">
					<option>4</option>
				</select>
			</div>
			<div class="form9">
				<label for="textfield3"></label> Mes: <select name="select5"
					id="select4" style="width: 40px">
					<option>3</option>
				</select>
			</div>
			<div class="form10">
				<label for="textfield3"></label> Ano: <select name="select6"
					id="select5" style="width: 72px">
					<option>2013</option>
				</select>
			</div>
			<div class="form3" align="right">Estado:</div>
			<div class="form4">
				<label for="select"></label> <select name="select7" id="select"
					style="width: 244px">
				</select>
			</div>
			<div class="form3" align="right">Cidade:</div>
			<div class="form4">
				<label for="select"></label> <select name="select8" id="select"
					style="width: 244px">
				</select>
			</div>
			<div class="form3" align="right">Nome usuário:</div>
			<div class="form4">
				<label for="textfield3"></label> <input type="text"	name="textfield7" id="textfield4" style="width: 240px" />
			</div>
			<div class="form3" align="right">Senha:</div>
			<div class="form4">
				<label for="textfield3"></label> <input type="text"	name="textfield8" id="textfield5" style="width: 240px" />
			</div>
			<div class="form3" align="right">Confirme senha:</div>
			<div class="form4">
				<label for="textfield3"></label> <input type="text"	name="textfield9" id="textfield6" style="width: 240px" />
			</div>
			<div class="form1" align="right">Segurança:</div>
			<div class="form11">
				<label for="textfield3"></label> <input type="text"	name="textfield10" id="textfield7" style="width: 95px" />
			</div>
			<div class="form12">
				<img src="images/ilustra_senha.jpg" width="116" height="40" />
			</div>
			<div class="form3" align="right"></div>
			<div class="form13" align="right">
				<input type="checkbox" name="checkbox" id="checkbox" /> <label
					for="checkbox"></label>
			</div>
			<div class="form14" align="right">
				Eu aceito o <strong>termos e condições</strong>
			</div>
			<div class="form3" align="right"></div>
			<div class="form13" align="right"></div>
			<div class="form14" align="right">
				<a href="#"><img src="images/bot_cancelar.gif" width="81"
					height="25" /></a><a href="#"><img src="images/bot_enviar.gif"
					width="77" height="25" /></a>
			</div>
			<p>&nbsp;</p>
		</div>
	 </div>
	</body>
</f:view>
</html>
